<script setup lang="ts">
import { reactive, ref, toRef } from 'vue'

const msg = ref('Hello World')

msg.value = '1'

const student = reactive({
  name: 'hina',
  age: 17,
  school: 'Gehenna'
})

const school = toRef(student, 'school')
</script>

<template>
  <div class="space-y-4 pl-2">
    <div>msg:{{ msg }}</div>
    <input class="rounded-md border pl-2" type="text" v-model="msg" @input="console.log(msg)" />
    <div>{{ student.name }}</div>
    <button class="rounded-md border border-green-400 bg-green-200 px-4 active:scale-95" @click="student.age += 1">
      {{ student.age }}
    </button>
    <div>{{ student.school }}</div>
    <div>{{ school }}</div>
  </div>
</template>
